<template>
  <!-- 需求单 -->
  <div>
    <!-- 第一行 -->
    <el-row>
      <el-col span="2.5">
        <el-button icon="el-icon-menu">
          黄金品类
        </el-button>
      </el-col>
      <el-col span="2.5">
        <el-button icon="el-icon-plus">
          <router-link
            to="/newneed"
            tag="span">
            新增需求单
          </router-link>
        </el-button>
      </el-col>
      <el-col span="2.5">
        <el-button icon="el-icon-printer" @click="daochu">
          导出
        </el-button>
      </el-col>
      <el-col span="6">
        <el-date-picker
          v-model="date"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="timestamp"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @blur="searchDate"/>
      </el-col>
      <el-col span="1">
        <div> &nbsp;</div>
      </el-col>
      <el-col span="4">
        <el-input
          v-model="input"
          placeholder="请输入内容"/>
      </el-col>
      <el-col span="2">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="search">搜索</el-button>

      </el-col>
      <el-col span="3">
        <el-button
          circle="true"
          icon="el-icon-delete-solid"/>
        <el-button
          circle="true"
          icon="el-icon-refresh"
          @click="refresh()"/>

      </el-col>
    </el-row>

    <!-- 表格 -->

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        label="序号"
        align="center"
        width="50">
        <template slot-scope="scope">
          <span>
            {{ scope.$index+1 }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="oddNumber"
        align="center"
        label="单号"
        width="180"/>

      <el-table-column
        prop="client"
        align="center"
        label="客户"
        width="100"/>
      <el-table-column
        prop="dep"
        align="center"
        label="采购部门"
        width="100"/>
      <el-table-column
        prop="weight"
        align="center"
        label="重量"
        width="80"/>
      <el-table-column
        prop="weight"
        align="center"
        label="数量"
        width="80"/>
      <el-table-column
        prop="goodsWeight"
        align="center"
        label="来货重量"
        width="80"/>
      <el-table-column
        prop="goodsAmount"
        align="center"
        label="来货数量"
        width="80"/>
      <el-table-column
        prop="single"
        align="center"
        label="制单人"
        width="100"/>
      <el-table-column
        prop="createdTime"
        align="center"
        label="制单时间"
        width="170"/>
      <el-table-column
        label="状态"
        align="center"
        width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 0 ">
            已取消
          </span>
          <span v-if="scope.row.status == 1 ">
            定稿
          </span>
          <span v-if="scope.row.status == 2 ">
            草稿
          </span>
          <span v-if="scope.row.status == 3 ">
            待分配
          </span>
          <span v-if="scope.row.status == 4 ">
            已分配
          </span>
          <span v-if="scope.row.status == 5 ">
            采购中
          </span>
          <span v-if="scope.row.status == 6 ">
            已完成
          </span>
        </template>

      </el-table-column>
      <el-table-column
        prop="date"
        align="center"
        label="操作"
        width="100"
        height="2200"
      >

        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini">
            <router-link :to="{path:'/editPurchaseOrder/'+scope.row.oddNumber}">编辑</router-link>
            </el-button>
          <div style="margin: 5px">

          </div>
          <router-link to="/DemandAllocation">
<!--            @click="detail(scope.row.id)"-->
          </router-link>
          <el-button
            type="primary"
            size="mini"
          >
            <router-link to="/DemandAllocation">
              详情
            </router-link>

          </el-button>
          <div style="margin: 5px">

          </div>
          <el-button
            type="danger"
            size="mini"
            @click="detail(scope.row.id)">
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
<!--    <el-pagination-->
<!--      :current-page="pageNum"-->
<!--      :page-sizes="[10, 20, 30]"-->
<!--      :page-size="pageSize"-->
<!--      :total="total"-->
<!--      style="float:right"-->
<!--      layout="total, sizes, prev, pager, next, jumper"-->
<!--      @size-change="handleSizeChange"-->
<!--      @current-change="handleCurrentChange"/>-->
    <div class="block">
      <el-pagination
        @size-change="Size"
        @current-change="Current"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData1.total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import need from '@/api/needManager/need'
export default {
  inject: ['reload'],
  data() {
    return {
      input: '',
      // date: '',
      // 需求单列表
      tableData: [],
      // 分页
      pageNum: 1,
      pageSize: 10,
      total: null,
      date: ['null', 'null'],
      tableData1 : []
    }
  },
  created() {
    // 展示需求表
    this.start()
  },
  methods: {
    daochu(){
      need.daochu().then(result => {
        this.$message({
          message: '导出成功',
          type : 'success',
        })
      })
    },

    Size(val) {

      this.pageSize = val
      this.start()
    },

    Current(val) {
      this.pageNum = val
      this.start()
    },
    finished(id) {
      // 修改状态
      this.$confirm('此采购是否已完成, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          method: 'put',
          url: this.baseUrl + 'requisitionForm/finishedStatus',
          params: {
            id: id
          }
        }).then((res) => {
          this.tableData = res.data.data
          this.reload()
          this.$message({
            type: 'success',
            message: '采购已完成!'
          })
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    detail(id) {
      // 跳转到需求单详情页面
      this.$router.push({ name: 'demandOrderDetails', query: { id: id }})
    },
    // search() {
    //   // 按输入入库编号查
    //   // alert(this.date);
    // },
    searchDate() {
      // 按时间查询
      this.start()
    },
    search() {
      // 清空
      this.tableData = []
      if (this.input === '') {
        this.$message.error('请输入查询信息')
        return
      }
      const orderNum = this.input
      needallocation.info(orderNum).then(result => {
       // this.tableData = result.data
      })
    },
    // 刷新页面
    refresh() {
      this.reload()
    },

    // // 分页
    // handleSizeChange(val) {
    //   this.pageSize = val
    //   this.start()
    // },
    // handleCurrentChange(val) {
    //   this.pageNum = val
    //   this.start()
    // },
    edit(id) {
      // 跳转到编辑需求单页面
      this.$router.push({ name: 'editDemandList', query: { id: id }})
    },
    cancel(id) {
      this.$confirm('取消当前此需求单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios({
          method: 'put',
          url: this.baseUrl + 'requisitionForm/cancel',
          params: {
            id: id
          }
        }).then((res) => {
          console.log(res.data.data)
          // this.tableData = res.data.data
          this.reload()
          this.$message({
            type: 'success',
            message: '取消成功!'
          })
        })
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页
    start() {
      this.pageNum1 = this.pageNum
      this.pageSize1 = this.pageSize
      need.list(this.pageNum , this.pageSize1).then(result => {
        this.tableData = result.data.list
        this.tableData1 = result.data
        console.log(this.tableData1)
      })
    }
  }
}
</script>

<style scoped>
</style>
